<template>
	<view class="page">
		<!-- 搜索框 -->
		<view class="search-container">
			<view class="search-box">
				<image class="search-icon" src="/static/img/search.png" mode="aspectFit"></image>
				<input type="text" class="search-input" placeholder="请输入商户信息或终端编号" v-model="searchKeyword" @confirm="search" />
			</view>
			<view class="filter-icon" @click="search">
				<image src="/static/img/filter.png" mode="aspectFit"></image>
			</view>
		</view>
		
		<!-- 总数显示 -->
		<view class="total-count">共{{totalCount}}条</view>
		
		<!-- 商户列表 -->
		<view class="merchant-list">
			<view class="merchant-item" v-for="(item, index) in merchantList" :key="index" @click="goDetail(item)">
				<view class="merchant-sn">
					<text>SN: {{item.snNo}}</text>
				</view>
				
				<!-- 分隔线 -->
				<view class="divider-line"></view>
				
				<view class="merchant-time">{{item.createDate}}</view>
				
				<view class="merchant-info">商户信息：{{item.name}} ({{formatPhone(item.phone)}})</view>
				
				<view class="merchant-status">
					<text class="status-text" :class="{'status-active': item.activationStatus === '1', 'status-inactive': item.activationStatus === '0'}">
						{{item.activationStatus === '1' ? '已激活' : '未激活'}}
					</text>
				</view>
			</view>
			
			<!-- 加载更多/到底提示 -->
			<view class="load-more" v-if="merchantList.length > 0">
				<text v-if="hasMore" @click="loadMore">加载更多</text>
				<text v-else>到底了</text>
			</view>
			
			<!-- 空数据提示 -->
			<view class="empty-data" v-if="merchantList.length === 0">
				<image src="/static/img/empty.png" mode="aspectFit"></image>
				<text>暂无数据</text>
			</view>
		</view>
	</view>
</template>

<script>
	const api = require('../../config/api');
	const util = require('../../utils/util');
	
	export default {
		data() {
			return {
				searchKeyword: '',
				totalCount: 0,
				merchantList: [],
				currentPage: 1,
				pageSize: 10,
				hasMore: true,
				userId: uni.getStorageSync('userId')
			}
		},
		onLoad() {
			this.loadMerchantList();
		},
		onPullDownRefresh() {
			this.refresh();
			setTimeout(() => {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		onReachBottom() {
			if (this.hasMore) {
				this.loadMore();
			}
		},
		methods: {
			// 监听导航栏按钮点击事件
			onNavigationBarButtonTap(e) {
				// 假设只有一个按钮，索引为 0
				if (e.index === 0) {
					uni.navigateTo({
						url: '/pages/Merchant/merchantEntry'
					});
				}
			},
			// 格式化手机号，中间4位显示为****
			formatPhone(phone) {
				if (!phone) return '';
				return phone.substring(0, 3) + '****' + phone.substring(7);
			},
			
			// 加载商户列表
			async loadMerchantList() {
				uni.showLoading({
					title: '加载中...'
				});
				
				try {
					const params = {
						keyWords: this.searchKeyword,
						userId: uni.getStorageSync('userId'),
						page: this.currentPage,
						limit: this.pageSize
					};
					
					// 添加token到请求头
					const headers = {
						'Content-Type': 'application/json',
						'token': uni.getStorageSync('token')
					};
					
					// 发送请求
					uni.request({
						url: api.merchantDjListUrl,
						method: 'POST',
						data: params,
						header: headers,
						success: (res) => {
							if (res.data.code === 0) {
								const data = res.data.data;
								this.totalCount = data.total;
								
								// 判断是否有更多数据
								this.hasMore = this.currentPage < data.pages;
								
								// 追加数据或替换数据
								if (this.currentPage === 1) {
									this.merchantList = data.records;
								} else {
									this.merchantList = [...this.merchantList, ...data.records];
								}
							} else {
								uni.showToast({
									title: res.data.msg || '加载失败',
									icon: 'none'
								});
							}
							uni.hideLoading();
						},
						fail: (err) => {
							console.error(err);
							uni.showToast({
								title: '网络异常',
								icon: 'none'
							});
							uni.hideLoading();
						}
					});
				} catch (error) {
					console.error(error);
					uni.showToast({
						title: '网络异常',
						icon: 'none'
					});
					uni.hideLoading();
				}
			},
			
			// 搜索
			search() {
				this.currentPage = 1;
				this.merchantList = [];
				this.loadMerchantList();
			},
			
			// 刷新
			refresh() {
				this.currentPage = 1;
				this.merchantList = [];
				this.loadMerchantList();
			},
			
			// 加载更多
			loadMore() {
				if (this.hasMore) {
					this.currentPage++;
					this.loadMerchantList();
				}
			},
			
			// 跳转到详情页
			goDetail(item) {
				uni.navigateTo({
					url: '/pages/Merchant/merchantDetail?id=' + item.id
				});
			}
		}
	}
</script>

<style lang="scss">
	.page {
		padding: 0 20rpx;
		background-color: #f5f5f5;
		min-height: 100vh;
	}
	
	.search-container {
		display: flex;
		align-items: center;
		padding: 20rpx 0;
	}
	
	.search-box {
		flex: 1;
		height: 80rpx;
		background-color: #fff;
		border-radius: 40rpx;
		display: flex;
		align-items: center;
		padding: 0 30rpx;
	}
	
	.search-icon {
		width: 40rpx;
		height: 40rpx;
		margin-right: 20rpx;
	}
	
	.search-input {
		flex: 1;
		height: 80rpx;
		font-size: 28rpx;
	}
	
	.filter-icon {
		margin-left: 20rpx;
		width: 80rpx;
		height: 80rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.filter-icon image {
		width: 50rpx;
		height: 50rpx;
	}
	
	.total-count {
		font-size: 28rpx;
		color: #333;
		padding: 20rpx 0;
	}
	
	.merchant-list {
		
	}
	
	.merchant-item {
		background-color: #ffffff;
		border-radius: 20rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
		position: relative;
	}
	
	.merchant-sn {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 10rpx;
		padding-right: 160rpx;
	}
	
	/* 分隔线样式 */
	.divider-line {
		height: 1px;
		background-color: #f0f0f0;
		margin: 15rpx 0;
	}
	
	.merchant-time {
		font-size: 28rpx;
		color: #999;
		margin-bottom: 10rpx;
		margin-top: 10rpx;
	}
	
	.merchant-info {
		font-size: 28rpx;
		color: #333;
		margin-top: 10rpx;
	}
	
	.merchant-status {
		position: absolute;
		top: 30rpx;
		right: 30rpx;
	}
	
	.status-text {
		display: inline-block;
		background-color: #e1f3ff;
		color: #0091ff;
		font-size: 24rpx;
		padding: 8rpx 20rpx;
		border-radius: 30rpx;
	}
	
	.status-active {
		background-color: #e1f3ff;
		color: #0091ff;
	}
	
	.status-inactive {
		background-color: #f8f8f8;
		color: #999999;
	}
	
	.load-more {
		text-align: center;
		padding: 20rpx 0;
		color: #999;
		font-size: 26rpx;
	}
	
	.empty-data {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 100rpx 0;
	}
	
	.empty-data image {
		width: 200rpx;
		height: 200rpx;
		margin-bottom: 20rpx;
	}
	
	.empty-data text {
		color: #999;
		font-size: 28rpx;
	}
</style> 